<!--
 * @Author: Tommy Chen
 * @Date: 2024-05-22
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-07-31
 * @FilePath: /macc.admin.vue/src/project/authSys/views/quickCreate/deviceGroupSelector/index.vue
 * @Description: 
-->
<template>
  <div class="selector-wrapper" style="height: 100%">
    <div class="check-wrapper">
      <a-checkbox-group
        class="source-group"
        v-model="selectedGroupIds"
        name="sourceCheckboxGroup"
      >
        <a-checkbox
          :value="deviceGroup.id"
          :key="index"
          :disabled="isGroupDisabled(deviceGroup)"
          v-for="(deviceGroup, index) in deviceGroups"
        >
          <span :title="getBindedRule(deviceGroup)">{{
            deviceGroup.name
          }}</span>
        </a-checkbox>
      </a-checkbox-group>
      <div class="add-btn-wrapper" @click="onAddDeviceGroup">
        <icon-font type="ic-plus" />
        {{ $t('authDevice.addGroup') }}
      </div>
    </div>
    <div>
      <h3>{{ $t('quickCreate.selDevGroup') }}</h3>
      <div
        class="source-item"
        :key="index"
        v-for="(id, index) in selectedGroupIds"
      >
        {{ deviceGroupMap[id].name }}
      </div>
    </div>
    <AddGroupModal
      @refreshList="getAuthDeviceGroupList"
      ref="addGroupModalRef"
    />
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState } from 'vuex';
import { maccApi } from '@utils/index';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
import AddGroupModal from '@/project/authSys/views/authDevice/authDeviceGroupList/addModal.vue';
export default {
  name: 'deviceGroupselector',
  components: {
    AddGroupModal,
  },
  props: {
    ruleType: {
      typeof: Array,
      default: 'portal',
    },
    areaIds: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
  },
  mixins: [authSysMixin],
  data() {
    return {
      selectedGroupIds: [],
      originSelectedGroupIds: [], // 原始记录用来记录是否禁用
    };
  },
  watch: {
    areaIds: {
      handler(value) {
        if (value) {
          this.selectedGroupIds = _.cloneDeep(value);
          this.originSelectedGroupIds = _.cloneDeep(value);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  computed: {
    ...mapState('AuthCommon', ['deviceGroups']),
    deviceGroupMap() {
      const tempMap = {};
      for (const group of this.deviceGroups) {
        tempMap[group.id] = group;
      }
      return tempMap;
    },
  },
  methods: {
    resetSelector() {
      this.selectedGroupIds = [];
      this.originSelectedGroupIds = [];
    },
    isGroupDisabled(deviceGroup) {
      if (this.ruleType === 'portal') {
        return false;
      }

      let bindedDot1x = false;
      if (deviceGroup.authRuleList) {
        for (const rule of deviceGroup.authRuleList) {
          if (rule.authModeType === 2) {
            bindedDot1x = true;
          }
        }
      }

      return (
        !this.originSelectedGroupIds.includes(deviceGroup.id) && bindedDot1x > 0
      );
    },
    getBindedRule(deviceGroup) {
      const rules = [];
      if (!deviceGroup.authRuleList) {
        return '';
      }
      for (const rule of deviceGroup.authRuleList) {
        rules.push(rule.name);
      }
      if (rules.length > 0) {
        return this.$t('quickCreate.binded', [rules.join(',')]);
      } else {
        return '';
      }
    },
    async getAuthDeviceGroupList() {
      const res = await this.requestHttpAuth({
        api: maccApi.PRIVATE_DEVICE_GROUP_GET_API,
        method: 'GET',
        querys: {
          groupId: this.groupId,
          page: 1,
          size: 100,
        },
      });

      if (res.data.success) {
        this.$store.commit(
          'AuthCommon/SET_DEVICE_GROUP_LIST',
          res.data.result.items
        );
      } else {
        this.$message.warning(res.data.message);
      }
    },
    addGroupCallback() {},
    onAddDeviceGroup() {
      this.$refs.addGroupModalRef.openModal();
    },
    getSelectedIds() {
      if (this.selectedGroupIds.length > 0) {
        return this.selectedGroupIds;
      } else {
        this.$message.warning(this.$t('quickCreate.oneGroup'));
        return false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.selector-wrapper {
  display: flex;
  gap: 16px;
  > div {
    padding: 16px;
    border: 1px solid @component-stroke;
    border-radius: 4px;
    flex: 1;
    max-width: 500px;
  }
}
/deep/.ant-form-item {
  margin-bottom: 8px;
}
.source-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;

  /deep/.ant-checkbox-wrapper {
    margin-left: 0;
  }
}
.source-type {
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  border-radius: 2px;
  &.account {
    color: @warning-color;
    background: @warning-light;
    border: 1px solid @warning-focus;
  }
  &.voucher {
    color: @theme-color;
    background: @theme-light;
    border: 1px solid @theme-focus;
  }
}
.source-desc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.source-label {
  display: inline-block;
}
.source-item {
  margin-bottom: 16px;
}
.add-btn-wrapper {
  height: 38px;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 38px;
  border-top: 1px solid @borderColor2;
  color: @theme-color;
  margin-top: 16px;
}
.check-wrapper {
  display: flex;
  flex-direction: column;
}
</style>
